import { useState, useMemo, forwardRef, useImperativeHandle, useEffect } from 'react';
import { Form } from 'antd';
import CustomTabs from '../components/CustomTabs';
import Initiator from './Initiator';
import OpButton from './OpButton';
import Field from '../components/Field';
import Advance from './Advance';
import { firstTaskId, defaultStrategyValue, getInitButtons } from '../../utils';

const FirstTask = forwardRef((props: any, ref) => {
    const { userTaskData, curElement } = props;
    const [curTab, setCurTab] = useState('initiator');
    const [form] = Form.useForm();

    const customTabsData = useMemo(() => {
        return [
            {
                value: 'initiator',
                label: '发起人',
                disabled: false,
            },
            {
                value: 'button',
                label: '操作按钮',
                disabled: false,
            },
            {
                value: 'field',
                label: '字段权限',
                disabled: false,
            },
            // {
            //     value: 'advance',
            //     label: '高级设置',
            // },
        ]
    }, []);

    const formItems: any = useMemo(() => {
        return [
            {
                key: 'initiator',
                component: Initiator,
            },
            {
                key: 'button',
                component: OpButton,
            },
            {
                key: 'field',
                component: Field,
            },
            // {
            //     key: 'advance',
            //     component: Advance,
            // },
        ]
    }, []);

    const getinitialUrgingRuleValue = (senior: any) => {
        let _initialValue: string[] = [];
        if (senior?.isUrge) {
            _initialValue?.push('isUrge');
        };
        if (senior?.automaticUrge) {
            _initialValue?.push('automaticUrge');
        };
        return _initialValue;
    };

    useEffect(() => {
        let _curData = userTaskData?.find((item: { activityId: string; }) => item?.activityId == firstTaskId) || null;
        form.setFieldsValue({
            ..._curData,
            baseInfo: {
                ..._curData?.baseInfo,
                taskName: _curData?.baseInfo?.taskName || curElement?.businessObject?.name
            },
            buttonSetting: {
                ..._curData?.buttonSetting,
                inWithDraw: _curData?.buttonSetting?.inWithDraw ?? _curData?.buttonSetting?.actions?.find((item: { action: string; }) => item?.action == 'withDraw')?.enable ?? false,
                withdrawRule: _curData?.buttonSetting?.withdrawRule ?? _curData?.buttonSetting?.actions?.find((item: { action: string; }) => item?.action == 'withDraw')?.withdrawRule ?? 'openWithdrawal',
                actions: getInitButtons('firstTask', _curData?.buttonSetting?.actions),
            },
            assembly: _curData?.assembly || [],
            senior: {
                isUrge: _curData?.senior?.isUrge ?? false,
                urgingInterval: _curData?.senior?.urgingInterval ?? 0.5,
            },
        });
        setCurTab('initiator');
    }, [userTaskData, curElement]);

    const onValuesChange = (value: any, values: any) => {
        const withDraw = values?.buttonSetting?.actions?.find((item: { action: string; }) => item?.action == 'withDraw')?.enable;
        const isUrging = values?.buttonSetting?.actions?.find((item: { action: string; }) => item?.action == 'isUrge')?.enable;
        form.setFieldValue(['buttonSetting', 'inWithDraw'], withDraw);
        form.setFieldValue(['senior', 'isUrge'], isUrging);
        if (withDraw === true && !values?.buttonSetting?.withdrawRule) {
            form.setFieldValue(['buttonSetting', 'withdrawRule'], 'openWithdrawal');
        };
        if (isUrging === true && !values?.senior?.urgingInterval) {
            form.setFieldValue(['senior', 'urgingInterval'], 0.5);
        };
    };

    useImperativeHandle(ref, () => ({
        form,
    }));

    return (
        <>
            <CustomTabs tabs={customTabsData} onChange={setCurTab} curTab={curTab} />
            <Form
                labelCol={{ span: 5 }}
                wrapperCol={{ span: 19 }}
                labelAlign='left'
                labelWrap={true}
                layout={'horizontal'}
                form={form}
                onValuesChange={onValuesChange}
            >
                <Form.Item label='任务标识' name={['activityId']} hidden={true} />
                {
                    formItems?.map((item: { name: string; component: any; key: string }) => {
                        return (
                            <div style={{ display: curTab == item.key ? 'block' : 'none' }}>
                                <item.component {...props} form={form} />
                            </div>
                        )
                    })
                }
            </Form>
        </>
    );
});

export default FirstTask;